.Home {
  box-sizing: border-box;
  padding-top: 1.66rem;
  width: 100%;
  overflow-x: hidden;

  & > .text {
    box-sizing: border-box;
    padding: 0 1rem 1rem;

    &.nb {
      padding-bottom: 1rem;
    }

    & > h3 {
      padding-bottom: 0.6rem;
      font-size: 1rem;
    }

    & > textarea {
      height: 4rem;
    }
  }

  & > .card-list {
    box-sizing: border-box;
    padding: 0 4rem;
    margin-left: 2rem;
    display: grid;
    grid-template-columns: repeat(22, 1fr);
    gap: 2rem 0;
    width: 100%;
    height: max-content;

    & > .card {
      margin-left: -4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 6rem;
      height: 10.06rem;
      background: url('@/assets/images/card/bg.jpg') no-repeat;
      background-size: cover;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(255, 255, 255, 0.4);
      transition: all 0.28s;
      z-index: 1;
      cursor: pointer;

      &.active {
        transform: translateY(-1rem) !important;
        box-shadow: 0 8px 15px rgba(255, 255, 255, 0.88) !important;
      }

      &:hover {
        box-shadow: 0 8px 15px rgba(255, 255, 255, 0.6);
      }
    }
  }

  & > .btn {
    box-sizing: border-box;
    padding: 0 1rem 2rem;
  }

  & > .card-jx {
    box-sizing: border-box;
    padding: 0 1rem 2rem;

    & > .show-card {
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      gap: 1rem;

      & > img {
        width: 6rem;
        height: 10.06rem;

        &.rever {
          transform: rotate(180deg);
        }
      }
    }
  }
}

@media screen and (max-width: 888px) {
  .Home {
    & > .card-list {
      padding: 0 3rem;
      grid-template-columns: repeat(11, 1fr);
    }
  }
}

@media screen and (max-width: 588px) {
  .Home {
    & > .card-list {
      & > .card {
        width: 5.4rem;
        height: 8.6rem;
      }
    }

    & > .show-card {
      & > img {
        width: 5.4rem;
        height: 8.6rem;
      }
    }
  }
}
